<template>
  <div class="wrap">
    <headerPrint type="SAT"/>
    <div  class="print-wrap"   id="printWrapId">
        <p class="ft">KONE Corporation All right reserved 版权所有<span>SOCF-MSD-44/A</span></p>
        <div class="print">

            <div class="header">
                <img class="logo" src="~images/icon.jpg" alt="">
                <div class="title-wrap">
                    <p class="name">供应商场验报告</p>
                    <p class="name-en">Supplier-Acceptance Test</p>
                </div>
            </div>

            <table border="1" width="100%" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="12">
                        <p class="text-en">Distribution:</p>
                        <p class="text">分发 &nbsp;&nbsp;{{satInfo.distribution}}</p>
                    </td>
                    <td colspan="12">
                        <p class="text-en">No.</p>
                        <p class="text">编号 &nbsp;&nbsp;{{satInfo.atNo}}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="12">
                        <p class="text-en">KONE-Contract No. </p>
                        <p class="text">KONE合同号 &nbsp;&nbsp;{{info.csoffContractNo}}</p>
                    </td>
                    <td colspan="12">
                        <p class="text-en">Machine No.</p>
                        <p class="text">设备编号 &nbsp;&nbsp;{{satInfo.machineNo}}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="24" class="h180" style="height: 150px;">
                        <p class="text-en">Description of Line or Equipment:</p>
                        <p class="text">设备概述 &nbsp;&nbsp;</p>
                        <p class="descText" >{{satInfo.descriptionOfMe}}</p>
                    </td>
                </tr>

                <tr>
                    <td colspan="8">
                        <p class="text-en">Product:</p>
                        <p class="text">产品: &nbsp;&nbsp;{{satInfo.product}}</p>
                    </td>
                    <td colspan="8" class="">
                        <p class="text-en">Operation No.:</p>
                        <p class="text">工序号 &nbsp;&nbsp;{{satInfo.operationNo}}</p>
                    </td>
                    <td colspan="8" class="">
                        <p class="text-en">Date of SAT:</p>
                        <p class="text">场验日期: &nbsp;&nbsp;{{$moment(satInfo.atTime).format('YYYY-MM-DD')}}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="24" >
                        <p class="text-en">KONE-Participants</p>
                        <p class="text">KONE-参加人员 &nbsp;&nbsp;{{satInfo.participantNames}}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="24" >
                        <p class="text-en">Suppliers-Participants</p>
                        <p class="text">供应商参加人员 &nbsp;&nbsp;{{satInfo.suppliersParticipants}}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="24" >
                        <div>
                            <p class="text-en">SAT result:</p>
                            <p class="text">场验结果: &nbsp;&nbsp;</p>
                        </div>
                        <div>
                            <p class="text-en"><span class="radio" :class="{selectActive:isActiveCurrent(satInfo.atResult,'SAT-accepted')}"></span>SAT-accepted</p>
                            <p class="text">通过场验收</p>
                        </div>
                        <div>
                            <p class="text-en"><span class="radio"  :class="{selectActive:isActiveCurrent(satInfo.atResult,'Conditionally SAT')}"></span>Conditionally SAT</p>
                            <p class="text">有条件的通过场验收</p>
                        </div>
                        <div>
                            <p class="text-en">Detailed condition see appendix of SAT document</p>
                            <p class="text">详细情况见场验报告附录</p>
                        </div>
                    </td>
                </tr>

                <tr class="borderNone">
                    <td colspan="12" >
                        <p class="text underline t-c">华新精科</p>
                    </td>
                    <td colspan="12" >
                        <p class="text underline  t-c">Supplier供货商</p>
                    </td>
                </tr>
                <tr class="borderNone">
                    <td colspan="3" style="height: 150px;">
                        <p class="text-en">Dept.:</p>
                        <p class="text">部门</p>
                        <p>{{info.orgName}}</p>
                    </td>
                    <td colspan="3" >
                        <p class="text-en">Date:</p>
                        <p class="text">日期</p>
                        <p>{{$moment(satInfo.atTime).format('YYYY-MM-DD')}}</p>
                    </td>
                    <td colspan="6" >
                        <p class="text-en">Signature:</p>
                        <p class="text">签名</p>
                        <div class="signPathWrap">
<!--                            <img v-for="(item,index) in userList" :src="util.filePathToUrl(item.signPath)" alt="" :key="index">-->
                                <approvalSingleUser v-for="(item,index) in info.satApprovals" :key="index" :list="info.satApprovals" :progressCode="item.progressCode"></approvalSingleUser>
                        </div>
                    </td>
                    <td colspan="3" >
                        <p class="text-en">Dept.:</p>
                        <p class="text">部门</p>
                    </td>
                    <td colspan="3" >
                        <p class="text-en">Date:</p>
                        <p class="text">日期</p>
                    </td>
                    <td colspan="6" >
                        <p class="text-en">Signature:</p>
                        <p class="text">签名</p>
                    </td>
                </tr>
            </table>
        </div>
        <div class="print">
            <div class="header">

                <img class="logo" src="~images/icon.jpg" alt="">
                <div class="title-wrap">
                    <p class="name">供应商场验报告</p>
                    <p class="name-en">Supplier-Acceptance Test</p>
                </div>
            </div>
            <table border="1" width="100%" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="24" >
                        <p class="text-en">Appendix of acceptance document</p>
                        <p class="text">场验收报告附录</p>
                    </td>
                </tr>
                <tr  class="nowrap">
                    <td colspan="2">
                        <p class="text-en">Type</p>
                        <p class="text">类别</p>
                    </td>
                    <td colspan="6">
                        <p class="text-en" style="font-weight: 600;">Demands</p>
                        <p class="text">要求</p>
                    </td>
                    <td colspan="4">
                        <p class="text-en" style="font-weight: 600;">Verify</p>
                        <p class="text">验证</p>
                    </td>
                    <td colspan="4">
                        <p class="text-en" style="font-weight: 600;">Result</p>
                        <p class="text">结果(Pass/No)</p>
                    </td>
                    <td colspan="4">
                        <p class="text-en" style="font-weight: 600;">Who</p>
                        <p class="text">负责人</p>
                    </td>
                    <td colspan="4">
                        <p class="text-en" style="font-weight: 600;">When</p>
                        <p class="text">完成日期</p>
                    </td>
                </tr>
                <tr v-for="(item,index) in scfDetailDtos" :key="index" class="breakWord">
                    <td colspan="2">
                        <p class="text">{{ item.type }}</p>
                    </td>
                    <td colspan="6" >
                        <p class="text">{{item.demands}}</p>
                    </td>
                    <td colspan="4" >
                        <p class="text">{{ item.verify }}</p>
                    </td>
                    <td colspan="4" >
                        <p class="text">{{ item.result }}</p>
                    </td>
                    <td colspan="4" >
                        <p class="text">{{ item.who }}</p>
                    </td>
                    <td colspan="4" >
                        <p class="text">{{$moment(item.whenTime).format('YYYY-MM-DD')}}</p>
                    </td>
                </tr>
            </table>
        </div>
    </div>
  </div>
</template>


<script>
import headerPrint from './header'
import mixins from "@/views/devBasic/capex/print/mixins";
import approvalSingleUser from "@/views/devBasic/capex/print/approvalSingleUser.vue";
export default {
  name:"sat",
  mixins:[mixins],
  components:{headerPrint,approvalSingleUser},
  data(){
    return {
      info: this.$store.state.capex['SAT'+this.$route.query.id],
      satInfo:{},
      flows:{},
      scfDetailDtos:[],
      userList:[]
    }
  },
  async mounted() {
    this.satInfo = this.info.satInfo
    this.scfDetailDtos = this.info.scfDetailDtos
    const userList  = await this.getApproval(this.info.id,['SAT'])
    if (Array.isArray(userList) && userList.length > 0)
      this.userList = userList[0].userModelList || []
  },
  methods:{
    isActiveCurrent(str1,str2){
      return str1 == str2
    },
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
.print{
  padding: 55px;
}
</style>
